<template>
  <div id="category-article">
    <el-table :data="list"
              :show-header="false">
      <el-table-column align="left">
        <template slot-scope="scope">
          <dl>
            <router-link :key="scope.row.id" :title="scope.row.title"
                         :to="{name: 'article', params: {id:scope.row.id}}">
              <dt><span class="f-14">{{scope.row.title}}</span></dt>
              <dd class="desc opacity-8">{{scope.row.introduction}}</dd>
            </router-link>
            <dd class="opacity-5 mt-5">
              <span class="mr-10"><i class="el-icon-time mr-2"></i>{{scope.row.formatTime}}</span>
              <span class="mr-10"><i class="el-icon-view mr-2"></i>{{scope.row.readingNum}} 浏览</span>
              <span><i class="el-icon-chat-dot-round mr-2"></i>{{scope.row.commentNum}} 评论</span>
            </dd>
          </dl>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        small
        background
        :hide-on-single-page="true"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page="this.pagination.page"
        :page-size="this.pagination.size"
        :total="this.pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Pagination from '../../components/Pagination'

  export default {
    name: "category.vue",
    components: {
      Pagination
    },
    watch: {
      "$route": "reload"
    },
    data() {
      return {
        list: [],
        pagination: {
          page: 1,
          size: 10,
          total: 0,
        },
      }
    },
    methods: {
      async getArticleCategory(id) {
        let data = {
          page: this.pagination.page,
        }
        const loading = this.openLoading();
        // let res = await this.$api.articleCategory(id, data)
        let res = {"list":[{"id":131,"title":"PHPStorm Yaf框架代码追踪和提示","introduction":"在phpstorm中使用yaf框架的时候，yaf框架的类都无法追踪，并且调用相关类也没有提示。使用起来相当痛苦，并且看起来难受，鼠标放上去都是Undefined Class xxx。我们只需要在配置中修改下就行了：PHPStorm -\u003e Preferences -\u003e Languages \u0026 Frameworks -\u003e PHPPHP language level选择本地安装的PHP的版本。CLI Interpreter选择对应版本的php的路径，没有就点...，再点+添加，选择对应版本php就行了","commentNum":0,"readingNum":15,"image":"","isTop":0,"publishTime":1605692766,"categoryId":13,"categoryName":"其他","formatTime":"1个月前"},{"id":110,"title":"PHP exec 执行shell脚本失败怎么解决？","introduction":"首先，我们先看下exec函数：// 第一个参数是执行的命令\n// 第二个参数可选，返回完整执行结果，是个数组\n// 第三个参数可选，返回执行状态，0成功，其他都是失败\nexec(\u0026#39;/www/itspire.sh\u0026#39;, $res, $status);当我们执行失败的时候我们想知道为什么失败，哪里失败了。这时我们需要将标准错误定向到标准输出中：exec(\u0026#39;/www/itspire.sh 2\u003e\u00261\u0026#39;, $res, $status);这时候我们打印$res和$status，","commentNum":0,"readingNum":166,"image":"","isTop":0,"publishTime":1595578257,"categoryId":6,"categoryName":"PHP","formatTime":"5个月前"},{"id":109,"title":"PHP foreach变量引用传值后，将被其他foreach同名变量影响","introduction":"嗯，犯了低级错误我竟然还不知道，罪该万死。使用foreach出现问题，表示惭愧。可能是以前没有使用过同名的变量，导致没碰到过这个问题，我们直接看代码：$arr = [\n    [\u0026#39;subject\u0026#39;=\u003e\u0026#39;语文\u0026#39;, \u0026#39;desc\u0026#39;=\u003e\u0026#39;语文很好\u0026#39;],\n    [\u0026#39;subject\u0026#39;=\u003e\u0026#39;数学\u0026#39;, \u0026#39;desc\u0026#39;=\u003e\u0026#39;数学很好\u0026#39;],\n    [\u0026#39;subject\u0026#39;=\u003e","commentNum":0,"readingNum":152,"image":"","isTop":0,"publishTime":1595500162,"categoryId":6,"categoryName":"PHP","formatTime":"5个月前"},{"id":87,"title":"PHP !empty()是否包含isset()?","introduction":"经常能在项目中看到如下代码，那我们有没有考虑这样是否啰嗦了呢？if(isset($var) \u0026\u0026 !empty($var))首先我们了解下isset() 和 empty()isset：检测变量是否设置，并且不是 NULL。 即：变量未设置，返回false; 变量为NULL，返回falseempty：检查变量是否为空，\"\"、0、\"0\"、NULL、FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的，如果 var 为空，则返回 TRUE如果一个未定义的变量，var_","commentNum":0,"readingNum":531,"image":"","isTop":0,"publishTime":1572404795,"categoryId":6,"categoryName":"PHP","formatTime":"1年前"},{"id":85,"title":"PHP Inf and NaN cannot be JSON encoded","introduction":"json_encode 报错 Inf and NaN cannot be JSON encoded 我们通过 json_last_error_msg() 查看错因，得知是json序列化的数组里面包含NAN 和INF 这些内容导致的。解决方案如下：return json_encode(unserialize(str_replace(array(\u0026#39;NAN;\u0026#39;,\u0026#39;INF;\u0026#39;),\u0026#39;0;\u0026#39;,serialize($res))));","commentNum":0,"readingNum":1279,"image":"","isTop":0,"publishTime":1568771185,"categoryId":6,"categoryName":"PHP","formatTime":"1年前"},{"id":82,"title":"PHP 错误(Error) / 异常(Exception) 的捕获处理","introduction":"“错误”和“异常”的概念十分相似，都说明我们的系统出了问题，也都会给出错误信息和错误类型。但是“异常机制”的出现，是为了补充“错误机制”的不足，是为了防范可能出现的错误。优雅的处理错误和异常，是提升代码友好度和开发效率的关键。什么是错误？PHP中将代码自身的异常（一般是环境或者语法非法所致）称为错误（Error）。什么是异常？PHP中将代码运行中出现的逻辑错误称为异常（Exception）。| 异常异常是 Exception类的对象，我们可以通过getCode()，getMessage()，ge","commentNum":0,"readingNum":987,"image":"","isTop":0,"publishTime":1567681520,"categoryId":6,"categoryName":"PHP","formatTime":"1年前"},{"id":81,"title":"Mac下安装docker，并使用docker-compose安装PHP开发环境","introduction":"安装 Docker for Mac 系统最低需要 macOS 10.10.3 Yosemite。| Homebrew安装查看是否安装Homebrew$ brew --version\nHomebrew 2.1.2若未安装，我们来安装下：/usr/bin/ruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"若已安装，我们执行以下命令：$ brew cask install d","commentNum":0,"readingNum":1651,"image":"","isTop":0,"publishTime":1566359148,"categoryId":13,"categoryName":"其他","formatTime":"1年前"},{"id":79,"title":"PHP $a \u0026\u0026 $b = $c 的用法","introduction":"在写代码的时候经常需要做if简单判断赋值操作，if多了就显得代码块太大；if如果去掉大括号代码读起来太难受。这时候我们可以用这种写法，意思是：如果$a为真，将$c赋值给$b。// 这是正常的写法，判断多了代码太长\nif ( $a ) {\n    $b = $c;\n}\n\n// 这种写法会被人骂的\nif ( $a ) $b = $c;\n\n// 如果$a为真，将$c赋值给$b\n$a \u0026\u0026 $b = $c;","commentNum":0,"readingNum":356,"image":"","isTop":0,"publishTime":1566184165,"categoryId":6,"categoryName":"PHP","formatTime":"1年前"},{"id":78,"title":"PHP 设计模式-观察者模式","introduction":"什么是观察者模式？一个对象被设置成可观察时，它的状态发生了变化或触发了某个事件，其他依赖它的对象全部会收到通知，并自动更新。为什么使用观察者模式？当发生某个事件后，我们需要对其他对象进行操作。比如登录后，我们需要更新用户的登录时间，传统的方式就是在事件的代码之后直接加入处理的逻辑；下次可能用户异地登录，我们又需要给用户推送消息；每次增加新的逻辑都需要修改事件的主体代码，这种是耦合性的、侵入式的。/**\n * 观察者接口\n * Interface IObserver\n */\ninterface I","commentNum":0,"readingNum":502,"image":"","isTop":0,"publishTime":1564047909,"categoryId":6,"categoryName":"PHP","formatTime":"1年前"},{"id":77,"title":"PHP 设计模式-注册树模式","introduction":"为什么要用注册树模式？一个项目中肯定会有很多对象，我们使用单例模式的时候，每次获取实例的时候都要判断这个实例是否存在。结合工厂模式的时候，就会有许多的对象，我们就会感觉这些对象非常零散，不方便统一管理。这时候我们使用注册树模式，不管什么对象，不管怎么生成的，只要生成了就统统插到注册树上。我们使用某个对象的时候，只要从树上取下来就可以了，类似全局变量，在入口文件处定义好之后，任意地方都能直接使用。我们来看实例：final class Db\n{\n    private static $instanc","commentNum":0,"readingNum":582,"image":"","isTop":0,"publishTime":1564024839,"categoryId":6,"categoryName":"PHP","formatTime":"1年前"}],"pagination":{"page":1,"size":10,"total":40}}
        loading.close();

        this.list = res.list
        this.pagination = res.pagination
      },
      handleCurrentChange(val) {
        this.pagination.page = val
        this.$router.push({path: this.$route.path, query: {page: val}})
      },
      reload() {
        let that = this
        let id = parseInt(this.$route.params.id)
        this.$store.state.categoryArticle.forEach(function (v) {
          if (v.id === id) {
            // 更改标题
            that.$common.title(v.categoryName)
          }
        })
        if (this.$route.query.page === {} || this.$route.query.page === undefined) {
          this.pagination.page = 1
        } else {
          this.pagination.page = this.$route.query.page
        }
        this.getArticleCategory(id)
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.reload()
      });
    }
  }
</script>

<style scoped>

  dl {
    padding: 0 10px;
  }

  dt {
    color: #428BD1;
  }

  dd {
    margin: 0;
    line-height: 20px;
  }

  dl a {
    font-weight: 500;
  }
</style>
